<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>

</style>

<body>
    <div id="app" class=" pl-16 pr-16 pt-16" v-cloak>
        <div>
            <el-dialog title="用户修改" :visible.sync="dialogFormVisible" width="30%" @closed="CL()">
                <el-form :model="userinfo" label-width="100px" size="small" :rules="rules" ref="ruleForm">
                    <el-form-item label="所属门店">
                        {{getDictionary(hotels, 'id', userinfo.htlId, 'name')}}
                    </el-form-item>
                    <el-form-item label="用户名" prop="name">
                        <el-input autocomplete="off" placeholder="如：张三" v-model="userinfo.name" v-if="edit"
                            style="width: 200px;"></el-input>
                        <span v-else>{{userinfo.name}}</span>
                    </el-form-item>
                    <el-form-item label="账号" prop="userName">
                        <el-input autocomplete="off" placeholder="如：pms001" v-model="userinfo.userName" v-if="edit"
                            style="width: 200px;">
                        </el-input>
                        <span v-else>{{userinfo.userName}}</span>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input autocomplete="off" placeholder="如：123456" v-model="userinfo.password" v-if="edit"
                            style="width: 200px;">
                        </el-input>
                        <span v-else>{{userinfo.password}}</span>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" size="small" class="tx-14">取 消</el-button>
                    <el-button type="primary" @click="edit = true" size="small" class="tx-14" v-if="!edit">编辑
                    </el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')" size="small" class="tx-14" v-if="edit">提交
                    </el-button>
                </div>
            </el-dialog>
        </div>
    </div>
    <script type="text/babel">
        window.vm = new Vue({
            el: '#app',
            data: {
                dialogFormVisible: false,
                edit: false,
                userinfo: Pms.getDate("userinfo", {}),
                hotels: [],
                rules: {
                    name: [
                        { required: true, message: '请填写用户名称', trigger: 'blur' },
                    ],
                    userName: [
                        { required: true, message: '请填写账号', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                    ],
                },
            },
            mounted() {
                this.getHotel();
                this.dialogFormVisible = true;
            },
            methods: {
                getHotel() {
                    this.GET({ url: top.Config.curUrl + "/bst/bstHotel/list" }).then((res) => {
                        if (res.retcode == 200) {
                            this.hotels = res.result.bstHotelList;

                        } else {
                            this.msgError(res.retmsg)
                        }
                    });
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.startLoading("加载中", { background: "rgba(0, 0, 0, 0)", target: document.getElementsByClassName("el-dialog")[0] }, this)
                            this.POST({ url: top.Config.curUrl + "/sys/sysUser/save", map: this.userinfo }).then((res) => {
                                if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                                    setTimeout(() => {
                                        Pms.setDate("userinfo", this.userinfo)
                                        top.vm.init();
                                        this.closeLoading();
                                        this.dialogFormVisible = false;
                                    }, 1000);
                                } else { //如果返回码是200则登录成功
                                    this.msgError(res.retmsg);
                                    this.closeLoading();
                                }
                            })
                        }
                    });
                },
            },
        })

    </script>

</body>

</html>